<template>
  <div>
    <p>列表页</p>
    <p>传过来的query参数:pageSize:{{ $route.query.pageSize }}</p>
    <p>传过来的query参数:pageNum:{{ $route.query.pageNum }}</p>
    <p>传过来的query参数:total:{{ $route.query.total }}</p>
    <el-button @click="handClick">跳转详情页</el-button>
    <router-link :to="{ path: '/artcle/7' }">
      <button>跳转详情页方式二</button>
    </router-link>
  </div>
</template>

<!-- <script>
export default {
  name: 'Artclelist',
  props: {
    // 接收父组件传递的参数
    pageSize: String,
    pageNum: String,
    total: String
  },
  mounted() {
    console.log('this.pageSize: ', this.pageSize)
  },
  methods: {
    handClick() {
      this.$router.push({
        name: 'ArtclePage',
        params: { id: 1 }
      })
    }
  }
}
</script>
 -->
<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
defineOptions({
  name: 'Artclelist'
})
var props = defineProps({
  pageSize: String,
  pageNum: String,
  total: String
})
onMounted(() => {
  console.log('pageSize: ', props.pageSize)
})
const handClick = () => {
  router.push({
    name: 'ArtclePage',
    params: { id: 1 }
  })
}
</script>
